import React, { Component } from 'react'
import "./expert.scss"
import Header from '../../components/Header/header'
import Footer from '../../components/Footer/footer'                                                                  
import {  getApiTeachersList , getApiTeacherType } from "../../axios/api"
import { Pagination } from 'antd';
import 'antd/dist/antd.css';
import { get } from '../../axios/localstorage'

export default class expert extends Component {

    state = {
        page:1,
        total:1,
        list:[],
        typeArr:[],
        type:"",
    }

    componentWillMount(){


        window.scroll(0,0);
        
        //教师列表

        getApiTeacherType()
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;


                this.setState({
                    typeArr:data,
                    type:data[0].id
                })

                this.getData();
            }
        }).catch( err =>{
            console.error(err);
        })

        
        
    }

    getData=(page)=>{

        setTimeout(()=>{


            let param = {
                page:this.state.page,
                type_id:this.state.type
            }
    
            getApiTeachersList(param)
            .then( req =>{
                if(req.data.code === 1){
                    let data = req.data.data;
                    this.setState({
                        total:data.total,
                        list:data.list,
                    })
                }
            }).catch( err =>{
                console.error(err);
            })

        },50)
    }

    gotoPage=(page)=>{
        this.props.history.push(page);
    }

    changePage=(page)=>{
        console.log(page);
        this.getData(page);
    }

    gotoChooseType=(item)=>{
        this.setState({type:item.id});this.getData();

    }

    render() {
        return (
            <div className="expert">
                <Header />
                <img alt="" src="assets/imgs/zhuangshi2.png" className='hp_bg' />
                <div className="main">

                    <div className='cen'>
                        <div className='cth'>
                            <div className="thead">
                                <div>
                                    <img className="img" alt="" src="assets/imgs/dingwei.png" />
                                    <p className="p_point" onClick={()=>{
                                        if(get('type')){
                                            // this.gotoPage('/index')
                                            this.gotoPage('/home')
                                          }else{
                                            this.gotoPage('/home')
                                          }
                                    }}>首页</p>
                                    <img className="icon" alt="" src="assets/imgs/gengduo2.png" />
                                    <p>名师列表</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* <div className="mhead">
                        <div className="cen">
                            <div className="hbox">
                                <div className="hitem">
                                    <h2>类型：</h2>
                                    {
                                        this.state.typeArr.map((item,index)=>{
                                            return <div key={index} className={this.state.type === item.id?"h_chosen":""} onClick={()=>{this.gotoChooseType(item)}}>{item.title}</div>
                                        })
                                    }
                                </div>
                            </div>
                        </div>
                        
                    </div> */}
                
                    <div className='cen'>
                        <div className="mcen">

                        <div className="mleft">
                            <div className="m1">
                                <img alt="" src="assets/imgs/zhuanjiabangyang.png" />
                                <p>专家榜样</p>
                            </div>
                            {
                                this.state.typeArr.map((item,index)=>{
                                    return <div key={index} className={this.state.type === item.id?"m2 m_active":"m2"} onClick={()=>{
                                        this.gotoChooseType(item)
                                        }}>
                                                {/* <img className="mimg" alt="" src="assets/imgs/xinwenzixun-jiantou.png" /> */}
                                                <p>{item.title}</p>
                                            </div>
                                })
                            }
                        </div>

                        <div className="box">
                        

                                <div className="list">
                                    {
                                        this.state.list.map((item,index)=>{
                                            return <div className='hitem' key={index} onClick={()=>{this.gotoPage('/teacherinfo?id='+item.id)}}>
                                                        <div className='cen'>
                                                            <div className='avatar' style={{backgroundImage:"url('"+item.path_text+"')"}}></div>
                                                        </div>
                                                        <h2>{item.name}</h2>
                                                        <p>{item.title}</p>
                                                    </div>
                                        })
                                    }
                                </div>

                                <div className='r_page'>
                                    <Pagination type="success" showSizeChanger={false} pageSize={25}  defaultCurrent={this.state.page} total={this.state.total} onChange={(page)=>{this.changePage(page)}} />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <Footer />
            </div>
        )
    }
}

